<script setup lang="ts">
	import { DATA_MAIN_FAVOR } from "../../utils/data"
	import { useI18n } from "vue-i18n";
	const { t } = useI18n()
</script>
<template>
	<view class="favor-container">
		<view class="title">
			<view class="text">{{t('home.followPage.noContentNow')}}</view>
			<view class="desc">{{t('home.followPage.noContentNowDesc')}}</view>
		</view>
		<view class="favor-list">
			<view v-for="item in DATA_MAIN_FAVOR" :key="item.name" class="favor-item flex-center">
				<view class="close">&times;</view>
				<image :src="`/static/${item.avatar}`" alt="avatar" class="avatar" mode="aspectFill" />
				<text class="author">{{item.name}}</text>
				<text class="desc">{{item.desc}}</text>
				<view class="list">
					<image :src="`/static/${img}`" alt="img" v-for="img in item.imgs" mode="aspectFill"
						class="list-img" />
				</view>
				<view class="favor">
					{{t('home.followPage.follow')}}
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.favor-container {
		flex: 1;

		.title {
			text-align: center;

			.text {
				font-size: $font-size-28;
				margin-top: 20rpx;
			}

			.desc {
				font-size: $font-size-20;
				color: gray;
				margin-top: 8rpx;
			}
		}

		.favor-list {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			padding: 100rpx 20rpx 20rpx 180rpx;
			overflow: scroll;

			.favor-item {
				margin-right: 16rpx;
				background-color: white;
				box-shadow: 0 0 10rpx 10rpx rgba(84, 84, 84, 0.03);
				text-align: center;
				padding: 15rpx;
				border-radius: 20rpx;

				.close {
					font-size: $font-size-28;
					width: 100%;
					display: flex;
					justify-content: flex-end;
					color: #260c16;
				}

				.avatar {
					width: 110rpx;
					height: 110rpx;
					border-radius: 100%;
					object-fit: cover;
				}

				.author {
					font-size: $font-size-28;
					margin-top: 15rpx;
				}

				.desc {
					font-size: $font-size-20;
					color: gray;
					margin-top: 5rpx;
				}

				.list {
					display: flex;
					flex-direction: row;
					gap: 3rpx;
					margin-top: 30rpx;

					.list-img {
						width: 110rpx;
						height: 110rpx;
						object-fit: cover;
						border-radius: 6rpx;
					}
				}

				.favor {
					padding: 10rpx 40rpx;
					background-color: #ea404a;
					color: white;
					border-radius: 40rpx;
					font-size: $font-size-20;
					margin-top: 50rpx;
				}
			}
		}
	}
</style>